<script setup>
import dayjs from 'dayjs';
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useStore from "@/store/index.js";
import { UploadImage, UpdateAppUserInfo } from "@/api/user.js"
import { showToast } from 'vant';
const router = useRouter()
const { userInfo } = useStore()

const onClickLeft = () => {
	router.back()
}
const user = computed(() => userInfo.userInfo)

// 更新头像
const updateAvatar = async (e) => {
	try {
		const formdata = new FormData()
		formdata.append("file", e.target.files[0])
		const res = await UploadImage(formdata)
		const params = { ...userInfo.userInfo }
		params.avatar = res.data
		console.log(params)
		await UpdateAppUserInfo(params)
		await userInfo.getUserInfo()
		showSuccessToast("修改头像成功")
	} catch (e) {
	}
}
</script>

<template>
	<!-- 导航栏 -->
	<van-nav-bar :style="{ background: '#151724' }" left-arrow fixed @click-left="onClickLeft">
		<template #title>
			<span style="color:#d8d9db">编辑资料</span>
		</template>
	</van-nav-bar>
	<!-- 主体内容 -->
	<div class="main bg-[#151724] px-[10px] pt-[56px] pb-[40px]">
		<!--头像-->
		<div class="flex mt-[20px]">
			<div class="w-[90px] h-[90px] relative avatar">
				<img v-if="user.avatar" :src="user.avatar" class="p-[2px] w-[100%] h-[100%] avatar" />
				<div v-else class="flex flex-col justify-center items-center h-full font-bold">
					<span>点击</span>
					<span>上传头像</span>
				</div>
				<div class="mt-[5px] text-center">点击更换头像</div>
				<input @change="updateAvatar" type="file" class="absolute w-full h-full left-0 top-0 rounded-[50%] opacity-0">
			</div>
		</div>
		<!-- 单元格 -->
		<div class="mt-[50px]">
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">名字</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.nickname }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">抖音号</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.code }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">简介</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.des }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">性别</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.sex == 2 ? "男" : "女" }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">生日</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.birthday }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">所在地</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.address }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
			<div class="flex justify-between items-center mb-[20px]">
				<div class="text-[#fbfbfb] text-[16px] text-bold">学校</div>
				<div class="flex-1 text-right mr-[15px] text-[#bababb]">{{ user.school }}</div>
				<van-icon name="arrow" color="#bababb" />
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.main {
	min-height: calc(100vh);
}

.scroll-container {
	display: flex;
	gap: 20px;
	height: 100px;
	overflow-x: scroll;
}

.scroll-container::-webkit-scrollbar {
	display: none;
}

.avatar {
	padding: 2px;
	border-radius: 50%;
	margin: 0 auto;
}

.van-cell {
	background: #151724;

	.custom-title {
		color: #f3f3f4;
	}
}
</style>
